<template>
	<view class="player-container">
		<!-- 顶部封面 -->
		<view class="player-cover">
			<SafeImage class="player-cover-image" :src="playerStore.icyData?.cover || playerStore.currentRadio?.favicon"
				mode="aspectFill" />
		</view>

		<!-- 中间信息区域 -->
		<view class="player-info">
			<view class="player-info-title">
				<text>{{ currentRadio.name }}</text>
				<!-- 收藏按钮 -->
				<view @click="toggleFavorite">
					<uni-icons type="heart-filled" color="#FF0266" size="56rpx" v-if="isFavorited" />
					<uni-icons type="heart" color="gray" size="56rpx" v-else />
				</view>
			</view>
			<view class="player-info-desc"><text>{{ playInfo }}</text>
			</view>
			<view class="player-info-wave" :class="{
				'wave-visible': playerStore.status === MediaStatus.playing && playerStore.volume,
				'wave-hidden': !(playerStore.status === MediaStatus.playing && playerStore.volume)
			}">
				<image src="/static/wave.gif" :style="{
					width: `${baseSize + volume}rpx`,
					height: `${(baseSize + volume) / gifRatio}rpx`
				}" mode="scaleToFill" class="wave-image" />
			</view>

		</view>

		<!-- 底部控制区域 -->
		<view class="player-controls">
			<!-- <view class="player-controls-volume"
				:style="{ opacity: sliderActive ? 1 : 0.3, transition: 'opacity 0.3s' }">
				<slider :value="volume" @changing="onVolumeChanging" @change="onVolumeChange" min="0" max="100"
					block-size="18" show-value activeColor="#B829F7" />
			</view> -->
			<view class="player-controls-icons">
				<uni-icons fontFamily="iconfont" size="75rpx" color="#B829F7" @click="prevStation">{{
					icons.prevSong }}</uni-icons>

				<view class="icon-container">
					<view class="loader-ring" v-if="playerStore.status === MediaStatus.waiting"></view>
					<uni-icons fontFamily="iconfont" size="75rpx" color="#B829F7" :prop="playerStore.status"
						@click="togglePlay">
						{{ playState }}
					</uni-icons>
				</view>

				<uni-icons fontFamily="iconfont" size="75rpx" color="#B829F7" @click="nextStation">{{
					icons.nextSong }}</uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { usePlayerStore } from '@/stores/usePlayerStore'
import { icons, MediaStatus } from '@/common/const'
import SafeImage from '@/components/SafeImage/SafeImage.vue';

const playerStore = usePlayerStore();

const currentRadio = computed(() => playerStore.currentRadio);

const isPlaying = computed(() => playerStore.status === MediaStatus.playing)
const playState = computed(() => isPlaying.value ? icons.pause : icons.play)
const playInfo = computed(() => {
	if (playerStore.icyData?.song) return `当前播放：${playerStore.icyData?.song}`;
	else return '暂无更多信息'
})

const isFavorited = computed(() => {
	return playerStore.favorites.findIndex(e => e.stationuuid === currentRadio.value?.stationuuid) > -1;
})

function togglePlay() {
	isPlaying.value ? playerStore.stop() : playerStore.play()
}

const nextStation = () => playerStore.next();
const prevStation = () => playerStore.prev();

function toggleFavorite() {
	playerStore.toggleFavorite(currentRadio.value);
	uni.showToast({ title: isFavorited.value ? '已收藏' : '已取消收藏', icon: 'none' })
}

const baseSize = 300
const gifRatio = 1.5 // 宽高比，例如 300px / 150px
// const volume = computed(() => (playerStore.volume || 0) * 100 | 0);
const volume = 1;
// const sliderActive = ref(false);
// const onVolumeChanging = (e : any) => {
// 	playerStore.setVolume(+e.detail.value / 100);
// 	sliderActive.value = true;
// }

// const onVolumeChange = (e : any) => {
// 	sliderActive.value = false;
// };
</script>

<style scoped>
page {
	height: 100%;
}

.player-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 40rpx;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
}

.player-cover {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50%;
	margin-top: 30rpx;
}

.player-cover-image {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}

/* 中间信息区域居中展示 */
.player-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 30rpx;
}

.player-info-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.player-info-title text {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
}

.player-info-desc {
	font-size: 28rpx;
	color: #aaa;
	padding-top: 10px;
}

.player-info-wave {
	min-height: 250rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease, filter 0.5s ease;
	opacity: 1;
	filter: drop-shadow(0 0 8rpx rgba(184, 41, 247, 0.5));
}

.wave-hidden {
	opacity: 0;
	pointer-events: none;
	filter: none;
}

.wave-image {
	transition: transform 0.6s ease;
}

.wave-visible .wave-image {
	transform: scale(1.05);
}


.player-favorite-active {
	color: red;
	font-weight: bold;
}

/* 底部控制区域 */
.player-controls {
	padding: 30rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40rpx;
	/* box-shadow: 0 -6rpx 24rpx rgba(0, 0, 0, 0.12); */
	margin-top: auto;
	margin-bottom: 30rpx;
}

.player-controls-volume {
	width: 100%;
}

.player-controls-volume uni-slider {
	margin: 0;
}

.player-controls-icons {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.player-controls-waiting {
	font-size: 24rpx;
	color: #fff;
}

.icon-container {
	position: relative;
	width: 76rpx;
	height: 76rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader-ring {
	position: absolute;
	width: 76rpx;
	height: 76rpx;
	border: 6rpx solid #ccc;
	border-top: 6rpx solid #29caf7;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 1;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>